<template>
  <el-card style="width: 100%;height:100%">
    <el-row>
      <el-col :span="5">
        <span>用户名称:</span>
        <el-input
          v-model="pageData.map.uid"
          style="width: 220px"
          placeholder="请输入"
          label="用户名称"
        />
      </el-col>
      <el-col :span="5">
        <span>站点名称:</span>
        <el-input
          v-model="pageData.map.siteId"
          style="width: 220px"
          placeholder="请输入"
          label="用户名称"
        />
      </el-col>
      <el-col :span="5">
        <span>电池名称:</span>
        <el-input
          v-model="pageData.map.batteryId"
          style="width: 220px"
          placeholder="请输入"
          label="用户名称"
        />
      </el-col>
      <el-col :span="5">
        <span>状态:</span>
        <el-select
          v-model="pageData.map.status"
          placeholder="请选择"
          style="width: 220px"
          clearable
        >
          <el-option label="归还" value="2" />
          <el-option label="租借" value="1" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="success" @click="list()">搜索</el-button>
        <el-button @click="reSet()">重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px"></el-row>
    <el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="序号" width="180" type="index" />
        <el-table-column prop="sysUser.nickname" label="用户名称" />
        <el-table-column prop="sysSite.address" label="站点名称" />
        <el-table-column prop="sysBattery.batteryName" label="电池品牌" />
        <el-table-column label="状态" #default="scope">
          <el-button v-if="scope.row.status == 1">借出</el-button>
          <el-button v-else>归还</el-button>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" />
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.size"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAll } from '@/api/site'

const pageData = ref({
  page: 1,
  size: 5,
  map: {},
  total: 0,
})
const tableData = ref([])
const list = async () => {
  const { code, message, data } = await getAll(pageData.value)
  if (code == 200) {
    console.log(data)
    tableData.value = data.records
    pageData.value.total = data.total
  }
}
const reSet = () => {
  pageData.value = {
    page: 1,
    size: 5,
    map: {},
  }
  list()
}
onMounted(() => {
  list()
})
const handleSizeChange = val => {
  console.log(`${val} items per page`)
  pageData.value.size = val
  list()
}
const handleCurrentChange = val => {
  console.log(`current page: ${val}`)
  pageData.value.page = val
  list()
}
</script>

<style scoped>
.demo-pagination-block {
  margin-top: 10px;
  margin-left: 950px;
}
/*.demo-pagination-block .demonstration {*/
/*  margin-bottom: 16px;*/
/*}*/
</style>
